<template>
  <div class="workStation">
    <div class="top-item">
      <div class="app-title">
        <i class="iconfont icon-wodegongzuotai"></i>
        <label>个人工作台</label>
      </div>
      <div class="edit-component-btn">
        <el-popover placement="bottom" width="300" trigger="click" popper-class="appPoper">
          <div class="blockContent">
            <div class="blockTitle">
              <div class="notice-text">点击添加或移除</div>
              <div class="grid-text" @click="openJustifyDialog">
                <i class="el-icon-menu"></i>调整布局
              </div>
            </div>
            <div class="blockMiddle">
              <div
                class="content-item"
                @click="addOrRemove(item)"
                :class="{
                  activeBackground: item.display == true,
                  ininactiveBackground: item.display == false,
                }"
                v-for="(item, index) in smallCardArr"
                :key="index"
              >
                <div class="item-text-desc">
                  <div
                    class="appName"
                    :class="{
                      activeColor: item.display == true,
                      inactiveColor: item.display == false,
                    }"
                  >
                    {{ item.cardName }}
                  </div>
                  <div class="appDesc">{{ item.desc }}</div>
                </div>
                <div class="item-operate-btn">
                  <i class="el-icon-check" v-if="item.display == true"></i>
                  <i class="el-icon-plus" v-if="item.display == false"></i>
                </div>
              </div>
            </div>
          </div>
          <el-button
            slot="reference"
            type="plain"
            size="mini"
            icon="el-icon-edit"
            >编辑小组件</el-button
          >
        </el-popover>
      </div>
    </div>
    <div class="center-item">
      <div class="inner-item">
        <div class="small-part">
          <el-col
            v-show="item.display"
            :class="{
              'item-box2':
                item.cardCode == 'bigCalendar' ||
                item.cardCode == 'teamCalendar',
              'item-box': item.cardCode != 'bigCalendar',
            }"
            v-for="(item, index) in smallCardList"
            :key="index"
          >
            <keep-alive>
              <component
                v-if="item.display"
                ref="componentRef"
                :is="item.cardCode"
                :componentTitle="item.cardName"
              />
            </keep-alive>
          </el-col>
        </div>
        <div class="big-part">
          <el-col
            v-show="item.display"
            :class="{
              'item-box2':
                item.cardCode == 'bigCalendar' ||
                item.cardCode == 'teamCalendar',
              'item-box': item.cardCode != 'bigCalendar',
            }"
            v-for="(item, index) in bigCardList"
            :key="index"
          >
            <keep-alive>
              <component
                v-if="item.display"
                ref="componentRef"
                :is="item.cardCode"
                :componentTitle="item.cardName"
              />
            </keep-alive>
          </el-col>
        </div>
      </div>
      <!-- <el-col v-show="item.display" :span="8*item.span" :class="{'item-box2':item.cardCode =='bigCalendar' ||item.cardCode =='teamCalendar','item-box':item.cardCode !='bigCalendar'}" v-for="(item,index) in componentArr" :key="index">
        <keep-alive>
          <component v-if="item.display" ref="componentRef" :is="item.cardCode" :componentTitle="item.cardName"/>
        </keep-alive>
      </el-col> -->
    </div>
    <dialogPublic
      class="submitDialog"
      title="调整布局"
      :show="justifyDialog"
      @doSubmit="justifySubmit"
      @doClose="() => (justifyDialog = false)"
      appendTobody
      width="640px"
      height="630px"
    >
      <justify-content
        :componentArrs="componentArr"
        @shiftPosition="shiftPosition"
      ></justify-content>
    </dialogPublic>
  </div>
</template>

<script>
import myApp from "./myApp";
import workCalendar from "./workCalendar";
import productionCockpit from "./productionCockpit";
import dutyToday from "./dutyToday";
import focusWork from "./focusWork";
import jobAccount from "./jobAccount";
import undoItem from "./undoItem";
import justifyContent from "./justifyContent";
import bigCalendar from "./bigCalendar";
import teamCalendar from "./teamCalendar";
import { getCardList, batchAddCard } from "@/api/workStation/workStation.js";
export default {
  props: [],
  components: {
    myApp,
    workCalendar,
    productionCockpit,
    dutyToday,
    focusWork,
    jobAccount,
    undoItem,
    justifyContent,
    bigCalendar,
    teamCalendar,
  },
  data() {
    return {
      paramUndo: "123",
      justifyDialog: false,
      smallCardArr: [],
      //弹窗中的顺序
      componentArr: [],
      appDataArr: this.$store.state.user.allAuth.appList,
      bigCardList: [],
      smallCardList: [],
    };
  },
  watch: {
    smallCardArr: {
      handler(val) {
        this.componentArr = val;
      },
    },
  },
  created() {
    this.getCardData();
  },
  mounted() {
    this.init();
  },
  cumputed: {},
  methods: {
    init() {
      //sessionStorage.setItem('currentType','workBench')
    },
    shiftPosition(arr) {
      this.currentShift = arr;
    },
    async getCardData() {
      let param = {
        appId: this.$store.state.user.userInfo.appId,
        account: this.$store.getters.userInfo.account,
      };
      await getCardList(param)
        .then((res) => {
          if (res.code == 200) {
            let datas = res.data;
            if (datas && datas.length > 0) {
              /*  let bigCalendar = {
              account: "krzhoujun",
              appId: "8e7e09b125ea4dbc8d0515564ceda01e",
              cardCode: "bigCalendar",
              cardName: "个人工作历(大)",
              createBy: "krzhoujun",
              createByName: null,
              createTime: "2022-03-19 11:10",
              deleteFlag: 0,
              deptId: null,
              deptName: null,
              display: true,
              sort: 0,
              span: 1,
              updateBy: "krzhoujun",
              updateByName: null,
              updateTime: "2022-04-08 20:02"
            }
            datas.push(bigCalendar) */
              let displayTrueArr = [];
              let smallCardList = [];
              let bigCardList = [];
              datas.map((item) => {
                if (
                  item.cardCode == "myApp" ||
                  item.cardCode == "bigCalendar" ||
                  item.cardCode == "teamCalendar"
                ) {
                  item.span = 2;
                  bigCardList.push(item);
                } else {
                  item.span = 1;
                  smallCardList.push(item);
                }
              });
              this.componentArr = [...smallCardList, ...bigCardList];
              let resData = this.componentArr.filter((i) => {
                return i.cardName;
              });
              this.smallCardArr = resData;
              this.smallCardList = smallCardList;
              this.bigCardList = bigCardList;
            }
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    addOrRemove(item) {
      item.display = !item.display;
      let param = {
        appId: this.$store.state.user.userInfo.appId,
        account: this.$store.getters.userInfo.account,
        homeCardPos: this.smallCardArr,
      };
      batchAddCard(param)
        .then((res) => {
          if (res.code == 200) {
            this.getCardData();
            this.$message.success(res.description);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    //打开调整布局弹窗
    openJustifyDialog() {
      this.justifyDialog = true;
    },
    //调整布局弹窗确定按钮
    justifySubmit() {
      let param = {
        appId: this.$store.state.user.userInfo.appId,
        account: this.$store.getters.userInfo.account,
        homeCardPos: this.currentShift,
      };
      batchAddCard(param)
        .then((res) => {
          if (res.code == 200) {
            this.getCardData();
            this.$message.success(res.description);
            this.justifyDialog = false;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    goAppDetailPage(app) {
      let { href } = this.$router.resolve({
        path: app.router,
        params: {
          name: app.name,
          logoSrc: app.logoSrc,
        },
      });
      this.$utils.setCurrentInfo();
      window.open(href, "_blank");
    },
    async getTodoItems() {
      let res = await todoItems();
      let data = res.data;
      this.todoList.forEach((item) => {
        item.count = data[item.code] || 0;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 工作台页面滚动条样式自定义 */
/deep/.itemContent::-webkit-scrollbar,
/deep/#calendar::-webkit-scrollbar,
/deep/.my-app::-webkit-scrollbar,
/deep/.center-item::-webkit-scrollbar,
/deep/.right-list::-webkit-scrollbar,
/deep/.search-result-list::-webkit-scrollbar,
/deep/.workList::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 8px;
  height: 8px;
  //background-color: #fff
  background-color: transparent;
}

/deep/.itemContent::-webkit-scrollbar-thumb,
/deep/#calendar::-webkit-scrollbar-thumb,
/deep/.my-app::-webkit-scrollbar-thumb,
/deep/.center-item::-webkit-scrollbar-thumb,
/deep/.right-list::-webkit-scrollbar-thumb,
/deep/.search-result-list::-webkit-scrollbar-thumb,
/deep/.workList::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 4px;
  //background-color: #d0d0d0b0;
  //background-color: #fff;
  background-color: transparent;
}

/deep/.itemContent::-webkit-scrollbar-thumb:hover,
/deep/#calendar::-webkit-scrollbar-thumb:hover,
/deep/.my-app::-webkit-scrollbar-thumb:hover,
/deep/.center-item::-webkit-scrollbar-thumb:hover,
/deep/.right-list::-webkit-scrollbar-thumb:hover,
/deep/.search-result-list::-webkit-scrollbar-thumb:hover,
/deep/.workList::-webkit-scrollbar-thumb:hover {
  //background-color: #bdbdbd;
  background-color: #d0d0d0b0;
}
/deep/.itemContent::-webkit-scrollbar-track,
/deep/#calendar::-webkit-scrollbar-track,
/deep/.my-app::-webkit-scrollbar-track,
/deep/.center-item::-webkit-scrollbar-track,
/deep/.right-list::-webkit-scrollbar-track,
/deep/.search-result-list::-webkit-scrollbar-track,
/deep/.workList::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
  -webkit-box-shadow: #fff;
  border-radius: 4px;
  background-color: transparent;
  display: none;
}
/deep/.el-col-16 {
  width: calc(66.66667% - 15px);
}
/deep/.el-col-8 {
  width: calc(33.33333% - 15px);
}
.workStation {
  width: 100%;
  height: calc(100% - 25px);
  padding: 15px 0px 15px 15px;
  display: flex;
  flex-direction: column;
  .top-item {
    height: 48px;
    color: #333333;
    font-size: 16px;
    background-color: white;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .app-title {
      display: flex;
      align-items: center;
      i {
        padding: 13px 12px 9px 20px;
        font-size: 24px;
        //color: #CCCCCC;
      }
      label {
        font-size: 18px;
        color: #333333;
        font-weight: bold;
        line-height: 100%;
        min-width: 120px;
        text-align: left;
      }
    }
    .edit-component-btn {
      padding: 7px 20px 7px 12px;
      font-size: 14px;
      font-weight: 400;
      font-family: Source Han Sans CN;
    }
  }
  .component-box {
    margin-top: 15px;
    height: calc(100% - 78px);
    overflow-y: auto;
  }
  .center-item {
    margin-top: 15px;
    margin-bottom: 20px;
    overflow: auto;
    .inner-item {
      display: flex;
      flex-direction: row;
    }
    .small-part {
      width: calc(33.33333% - 15px);
      display: flex;
      flex-direction: column;
    }
    .big-part {
      width: calc(66.66667% - 7px);
      display: flex;
      flex-direction: column;
      margin-left: 15px;
    }
    .item-box {
      background-color: white;
      //height: calc((100% - 30px) / 2);
      height: 345px;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 8px;
    }
    .item-box2 {
      background-color: white;
      //height: calc(100% - 15px);
      height: 707px;
      margin-right: 15px;
      margin-bottom: 15px;
      border-radius: 8px;
    }
  }
}
/deep/.blockContent {
  display: flex;
  flex-direction: row;
}
/deep/.blockTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/.notice-text {
  padding: 19px 0px 12px 16px;
  color: #999999;
}
/deep/.grid-text {
  padding: 19px 16px 12px 0px;
  color: #666666;
  cursor: pointer;
}
/deep/.content-item {
  height: 56px;
  margin: 0 16px 12px 16px;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  cursor: pointer;
  justify-content: space-between;
}
/deep/.blockMiddle {
  display: flex;
  flex-direction: column;
  max-height: 476px;
  overflow-y: auto;
}
/deep/.appName {
  padding: 12px 0 4px 12px;
}
/deep/.appDesc {
  font-size: 12px;
  font-weight: 300;
  color: #cccccc;
  padding: 0 0 8px 12px;
}
.activeColor {
  color: #0d60b4;
}
.inactiveColor {
  color: #666666;
}
.activeBackground {
  background: #eef5fc;
}
.ininactiveBackground {
  background: #f8f8f8;
}
/deep/.item-operate-btn {
  color: #0d60b4;
  padding: 16px 25px 0px 0px;
}
/deep/.divierTitleBackground {
  background: transparent !important;
}
/deep/.divier-title {
  margin: 15px 20px !important;
}
/deep/.divier-title-line {
  width: 4px;
  height: 18px !important;
}
/deep/.divier-title-text {
  font-weight: 500;
  font-size: 18px;
}
</style>
